<template>
	<view>
		<image class="page-bg" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/img-1.png" mode="widthFix"></image>
		<view class="trace-page">
			<!-- 自定义头部start -->
			<customHeader title="农产溯源"></customHeader>
			<!-- 自定义头部end -->
			<view class="u-flex u-col-top u-m-t-50 u-m-l-50">
				<image class="text-bg" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/trace/img-2.png" mode="widthFix"></image>
				<text class="u-m-l-20 text-wrap">
					每一件商品生成唯一的二维码，从源
					头可追溯产地、责任人、生产过程等，
					让消费者买得舒心、吃得放心。档案
					覆盖生产、加工、运输、销售4大环节，
					包含品牌信息、产品认证信息、农事
					记录、种植环境数据、生长期图片、
					加工配送等信息。
				</text>
			</view>
			<view class="btn-trace" @click="handleScan">扫码溯源</view>
		</view>
	</view>
</template>

<script>
		import customHeader from '@/components/customHeader.vue'
	export default {
		components: {customHeader},
		data() {
			return {
				code:''
			}
		},
		onLoad() {
			console.log(this.$store.state.code);
		},
		methods: {
			handleScan() {
				let that = this
				uni.scanCode({
					onlyFromCamera: false,
					scanType: ['qrCode'],
					success: function (res) {
						// console.log(res,'扫码内容');
						let url = res.result;
						let match = url.match(/[?&]code=([^&]+)/);
						that.code = match && match[1];
						if(that.$store.state.code && that.$store.state.code != that.code){
							uni.removeStorage({
								key: 'is_first',
								success: function (res) {
									console.log('');
								}
							});
							uni.removeStorage({
								key: 'lat',
								success: function (res) {
									console.log('');
								}
							});
							uni.removeStorage({
								key: 'lon',
								success: function (res) {
									console.log('');
								}
							});
						}
						that.$store.state.code = that.code
						uni.showToast({
							title: '扫码成功',
							icon: 'success',
							duration: 1000
						});
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/agricTrace/agricInfo/agricInfo"
							})
						},1000)
					},
					fail: (err) => {
					  // 打印扫码失败的信息
					  uni.showToast({
						title: '扫码失败',
						icon: 'none',
						duration: 1000
					  });
					}
				});
				
				// uni.navigateTo({
				// 	url: "/pages/agricTrace/agricInfo/agricInfo"
				// })
				
			},
		},
		onReady() {

		}
	}
</script>

<style scoped lang="scss">
	.page-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 750rpx;
		min-height: 100vh;
		z-index: 1;
	}

	.text-bg {
		width: 107rpx;
		height: 581rpx;
	}

	.trace-page {
		position: relative;
		z-index: 2;

		.text-wrap {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #04964A;
			line-height: 54rpx;
		}
	}

	.btn-trace {
		position: fixed;
		bottom: 60rpx;
		left: 45rpx;
		width: 660rpx;
		height: 100rpx;
		background: #07C160;
		border-radius: 15rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
	}
</style>
<style>
	page {
		padding: 0;
	}
</style>
